import React, { useEffect } from "react";
import { Button, Modal, Form, Input, Radio } from "antd";

interface IEdit {
    isEditModelValid: boolean;
    cancelEditModal: Function;
    itemData: {};
    onEditInfo: Function;
}

const { TextArea } = Input;
const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 4, span: 16 },
};
const validateMessages = {
    // eslint-disable-next-line no-template-curly-in-string
    required: "${label} 是必填的！",
};

const EditModal: React.FC<IEdit> = ({
    isEditModelValid,
    cancelEditModal,
    itemData,
    onEditInfo
}): React.ReactElement => {

    const [form] = Form.useForm();
    useEffect(() => {

        form.setFieldsValue(itemData);

    }, [itemData])// eslint-disable-line react-hooks/exhaustive-deps

    const onResets = () => {
        cancelEditModal(false);
        form.resetFields();
    }
    const onSubmit = () => {
        const formValues = form.getFieldsValue();
        onEditInfo(formValues);
    }

    return (
        <div className="edit_model">
            <Modal
                getContainer={false}
                title="发布数据"
                visible={isEditModelValid}
                footer={null}
                onCancel={() => {
                    cancelEditModal(false);
                }}
            >
                <Form
                    {...layout}
                    form={form}
                    name="control-hooks"
                    validateMessages={validateMessages}
                >
                    <Form.Item
                        name="vidID"
                        label="编号"
                    >
                        <Input disabled={true} />
                    </Form.Item>
                    <Form.Item
                        name="userName"
                        label="发布者"
                        rules={[{ required: true }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="MediaType"
                        label="数据类型"
                        rules={[{ required: true, message: "Please pick an item!" }]}
                    >
                        <Radio.Group>
                            <Radio.Button value="视频">视频</Radio.Button>
                            <Radio.Button value="图片">图片</Radio.Button>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name="address" label="地址" rules={[{ required: true }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item name="message" label="内容" rules={[{ required: true }]}>
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item name="type" label="数据标签">
                        <Radio.Group>
                            <Radio value="美妆">美妆</Radio>
                            <Radio value="数码">数码</Radio>
                            <Radio value="科技">科技</Radio>
                            <Radio value="生活">生活</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item {...tailLayout}>
                        <Button type="primary" onClick={onSubmit}>
                            修改
                        </Button>
                        <Button htmlType="button" onClick={onResets}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default EditModal;
